<template>
	<div class="setting-module-content">
		<div class="set-form">
			<el-form ref="videoFormRef" label-width="100px">
				<el-form-item label="" prop="setType" label-width="0px">
					<div class="form--radio-group-box" ref="radioGroupBoxRef">
						<el-tabs v-model="tabName" class="demo-tabs">
							<el-tab-pane label="转台控制" name="control"></el-tab-pane>
							<el-tab-pane label="预置位" name="on-premise"></el-tab-pane>
							<el-tab-pane label="巡航" name="cruise"></el-tab-pane>
						</el-tabs>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<ControlForm v-if="tabName === 'control'" :liveOptions="liveOptions" />
		<OnPremiseForm v-else-if="tabName === 'on-premise'" :liveOptions="liveOptions" />
		<CruiseForm v-else-if="tabName === 'cruise'" :liveOptions="liveOptions" />
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ControlForm, OnPremiseForm, CruiseForm} from './module'

const props = defineProps({
	liveOptions: {
		type: Object,
		default: () => ({}),
		required: true
	}
})

const tabName = ref<string>('control')

watch(
	() => props.liveOptions,
	newVal => {
		if (newVal) {
			tabName.value = 'control'
		}
	}
)
</script>
<style lang="scss" scoped>
.iframe-video-content {
	width: 100%;

	.iframe-video {
		width: 100%;
		height: 400px;
	}
}

.setting-module-content {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: var(--el-border);
	border-color: var(--el-color-primary);
	padding: 8px;
	box-sizing: border-box;

	:deep() {
		.el-form-item {
			margin: 0 0 8px;
		}
		.el-slider {
			.el-slider__button {
				width: 12px !important;
				height: 12px !important;
			}
		}
	}

	.set-form {
		margin: 0 0 8px;
	}

	.form--radio-group-box {
		overflow-x: auto;
		width: 100%;
		.set-form--radio-group {
			flex-wrap: nowrap;
			.el-radio-button {
				margin: 0 4px;
			}
		}

		.demo-tabs {
			border: 0;
			:deep() {
				--el-tabs-header-height: 24px;
				.el-tabs__nav-next,
				.el-tabs__nav-prev {
					line-height: var(--el-tabs-header-height);
					font-size: 24px;
				}

				.el-tabs__header,
				.el-tabs__content {
					padding: 0 !important;
				}
				.el-tabs__item {
					padding: 0 8px !important;
				}
			}
		}
	}
}
</style>
